<template>
	<!-- 社区 -->
	<view class="container">
			<view class="u-page">
				<!-- 头部 -->
				<view class="SeekTop">
				<view><!--type(1)-->
					<view><u-icon name="coupon-fill" size="70"></u-icon></view>
	            <text>学习与交流</text>
				</view>
				<view><!--type(2)-->
					<image :src="Study_img" mode=""></image>
					<view>
						<text>学习天地</text>
						<view>去跟左邻右舍打个招呼吧</view>
					</view>
				</view>
				<view><!--type(3)-->
					<u-button type="primary" @click="publiish">发布</u-button>
				</view>
				</view>
				<!-- 分类 -->
				<view class="Se_classify">
					<view class="classifybox">
						<view v-for="(item,index) in Se_classifyArr" :key="index">{{item}}</view>
					</view>
				</view>
				<!-- 帖子 -->
				<view class="invitation">
					<view class="invitationArr"><!-- 等待后端数据，然后循环 -->
						<view><!--type(1)-->
							<view>
								<image src="../../static/logo.png" mode=""></image>
							</view>
							<view>
								<view>莱莱</view>
								<view>xx小区</view>
							</view>
						</view>
						<view>发布的内容</view><!--type(2)-->
						<view><!--type(3)-->
						<view>2001年12月1日&nbsp;&nbsp;12:00</view>
						<view>
							<u-icon name="heart" label="520" size="45"></u-icon>
							<u-icon name="chat"  label="520"  size="45"></u-icon>
						</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 与包裹页面所有内容的元素u-page同级，且在它的下方 -->
			<u-tabbar v-model="current" :list="list" :mid-button="true" inactive-color="rgb(23,150,230)"
				active-color="#4CB2B6 "></u-tabbar>
		</view>
</template>

<script>
	export default {
		data() {
			return {
			list: [{
					iconPath: "home",
					selectedIconPath: "home-fill",
					text: '主页',
					count: 0,
					isDot: true,
					customIcon: false,
					pagePath: '/pages/navigation/home'
				},
				{
					iconPath: "photo",
					selectedIconPath: "photo-fill",
					text: '消息',
					customIcon: false,
					pagePath: '/pages/navigation/information'
				},
				{
					iconPath: "https://cdn.uviewui.com/uview/common/min_button.png",
					selectedIconPath: "https://cdn.uviewui.com/uview/common/min_button_select.png",
					text: '社区',
					midButton: true,
					customIcon: false,
					pagePath: '/pages/navigation/seek'
				},
				{
					iconPath: "play-right",
					selectedIconPath: "play-right-fill",
					text: '课程',
					customIcon: false,
					pagePath: '/pages/navigation/curriculum'
				},
				{
					iconPath: "account",
					selectedIconPath: "account-fill",
					text: '我的',
					count: 0,
					isDot: false,
					customIcon: false,
					pagePath: '/pages/navigation/my'
				},
			],
			current: 2,
			Study_img:"https://img0.baidu.com/it/u=3223999688,3234698217&fm=253&fmt=auto&app=138&f=JPEG?w=630&h=500",
			Se_classifyArr:["全部","帖子","名师授课","学校","线上教学","本小区","附近",]
			}
		},
		onLoad() {

		},
		methods: {
        publiish(){
			uni.navigateTo({
				url: '/pages/Child_Component/publish'
			});
		}
		}
	}
</script>
<style>
	page{
		background-color:#F8F8F8;
	}
</style>
<style scoped>
	.invitationArr>view:nth-of-type(3)>view:nth-of-type(2){
		margin-right: 20rpx;
		width: 250rpx;
		display: flex;
		justify-content: space-between;
	}
	.invitationArr>view:nth-of-type(3)>view:nth-of-type(1){
		margin-left: 20rpx;
		color: silver;
		font-size: 25rpx;
	}
	.invitationArr>view:nth-of-type(3){
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
	}
	.invitationArr>view:nth-of-type(1)>view:nth-of-type(2)>view:nth-of-type(2){
		font-size: 25rpx;
	}
	.invitationArr>view:nth-of-type(1)>view:nth-of-type(2)>view:nth-of-type(1){
		font-weight: bolder;
		font-size: 30rpx;
	}
	.invitationArr>view:nth-of-type(1)>view:nth-of-type(2){
		margin-left: 20rpx;
	}
	.invitationArr>view:nth-of-type(1)>view:nth-of-type(1)>image{
		height: 80rpx;
		width: 80rpx;
		border-radius: 50%;
		margin-left: 20rpx;
	}
	.invitationArr>view:nth-of-type(1){
		display: flex;
		margin-bottom: 20rpx;
	}
	.invitationArr{
		background-color: white;
		margin-top: 20rpx;
	}
		.classifybox>view{
			margin:20rpx;
		}
	.classifybox{
		display: flex;
		flex-wrap: wrap;
	}
	.Se_classify{
		height: 170rpx;
		background-color: white;
		margin-top: 20rpx;
	}
	.SeekTop>view:nth-of-type(2)>view>view{
		color: silver;
	}
	.SeekTop>view:nth-of-type(2)>view>text{
		font-weight: bolder;
		font-size: 30rpx;
	}
	.SeekTop>view:nth-of-type(2)>view{
		/* border: 1px solid firebrick; */
		width: 200rpx;
		margin-left: 10rpx;
	}
	.SeekTop>view:nth-of-type(2)>image{
		height: 130rpx;
		width: 130rpx;
		border-radius: 50%;
	}
	.SeekTop>view:nth-of-type(2){
		display: flex;
		align-items: center;
		border: 1px solid gainsboro;
		width: 400rpx;
		height: 140rpx;
		border-radius: 20rpx;
	}
	.SeekTop>view:nth-of-type(1)>text{
		margin-top: 20rpx;
	}
	.SeekTop>view:nth-of-type(1)>view{
		border: 1px solid gainsboro;
		height: 100rpx;
		width: 100rpx;
		text-align: center;
		line-height: 130rpx;
		border-radius: 50rpx;
	}
	.SeekTop>view:nth-of-type(1){
		/* border: 1px solid red; */
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
	.SeekTop{
		/* border: 1px solid blue; */
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: white;
		
	}
</style>
